<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="${path}/statics/layui/css/layui.css">
</head>
<body>

<!-- 查询条件 -->
<div class="layui-fluid" >
    <div class="layui-card">
      <div class="layui-form layui-card-header layuiadmin-card-header-auto">
        <div class="layui-form-item">
        
        
          <div class="layui-inline">
            <label class="layui-form-label">文章名</label>
            <div class="layui-input-block">
              <input type="text" name="title" id="titleId" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
        
          <div class="layui-inline">
            <label class="layui-form-label">评论内容</label>
            <div class="layui-input-block">
              <input type="text" name="content" id="contentId" placeholder="请输入" autocomplete="off" class="layui-input">
            </div>
          </div>
          
          
          <div class="layui-inline">
            <button class="layui-btn layuiadmin-btn-useradmin" id="searchBtn" lay-submit lay-filter="LAY-user-front-search">
              <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
          </div>
        </div>
      </div>
   </div>
</div>     

<script type="text/html" id="headToolBar">
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="delete">批量删除</a>
	
</script>

<script type="text/html" id="rowToolBar">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
	
	<table id="tableId" lay-filter="dataTable"></table>
	
	
<script src="${path}/statics/layui/layui.js"></script>
<script>
//JavaScript代码区域
layui.use(['jquery','layer',"table"], function(){
   
  var $ = layui.jquery;
  var layer = layui.layer;
  
  var table = layui.table;
 
  
  
  //点击查询按钮的处理事件
  $("#searchBtn").click(function(){
	 // alert();
	 
	 //重新加载表格,额外传递参数
	table.reload('tableId', {
 	    where: { //设定异步数据接口的额外参数，任意设
    	 title: $("#titleId").val()
    	,content: $("#contentId").val()
    	
    	//…
  	}
  	,page: {
  	   curr: 1 //重新从第 1 页开始
    }
	}); //只重载数据
	  
  });
  

  var active= {
  		  //重新加载表格数据,还是异步请求
  		  reloadTable:function(){
  			  table.reload('tableId', {
  				  page: {
  				    curr: 1 //重新从第 1 页开始
  				  }
  				}); //只重载数据
  		  },
  		//删除数据
  		  deleteArticle:function(ids){
  			layer.confirm('真的删除行么', function(index){
  	    	    
  		        //obj.del(); //删除对应行（tr）的DOM结构
  		        layer.close(index);
  		        //向服务端发送删除指令
  		         //向服务端发送删除指令
  	     	        $.post("${path}/memberCtl/delete",{ids:ids},function(res){
  	     	        	
  	     	        	//返回状态码
  	     	        	if(res == 0){
  	     	        		layer.msg("删除成功",{icon:1},function(){
  	     	        			//因为在父级页面,所以不用parent.tools.function()
  	     	        			active.reloadTable();	
  	     	        		})
  	     	        	}else{
  	     	        		layer.msg("删除失败",{icon:5});
  	     	        	}
  	     	        	
  	     	        });
  		        
  	      });
  		  }
  }

  window.tools = active;
  
  //第一个实例
  table.render({
    elem: '#tableId'
    ,url: '${path}/memberCtl/commentList' //数据接口
    ,page: true //开启分页
    ,toolbar: '#headToolBar'
    ,limit: 5
    ,limits:[5,10,20,30,40,50,60]
    ,initSort:{
    	field: 'comment_time' //排序字段
    	,type: 'desc'
    }
    ,cols: [[ //表头
      {type: 'checkbox', fixed: 'left'}
      ,{field: 'id', title: '评论ID' ,width :120}
      ,{field: 'content', title: '评论内容' ,width :210}
      ,{field: 'title', title: '评论文章' ,align:'center',sort:true ,width :120}
      
      ,{field: 'author', title: '作者' ,width :120}
      
      ,{field: 'comment_time', title: '评论时间',width :300,sort:true,templet:function(row){
    	  //row表示当前行数据
    	  var date = new Date(row.comment_time);
    	  return date.getFullYear()+"-"+date.getMonth()+"-"+date.getDate();
      }}
      ,{fixed: 'right', width: 120, align:'center', toolbar: '#rowToolBar'}
    ]]
  });
  
  
  
  //监听头工具栏事件
  table.on('toolbar(dataTable)', function(obj){
    var checkStatus = table.checkStatus(obj.config.id)
    ,data = checkStatus.data; //获取选中的数据
    switch(obj.event){
    case 'delete':
    	if(data.length === 0){
            layer.msg('请至少选择一行');
          } else {
          	
          	//获取选中的行数的id值
          	var ids = "";
          	for(var i=0;i<data.length;i++){
          		ids += data[i].id + ","
          	}
          	 active.deleteArticle(ids);
          }
      break;
    
      case 'push':
        if(data.length === 0){
          layer.msg('请至少选择一行');
        } else {
        	
        	active.pushAndCancel(1,data);
        }
      break;
      case 'cancel':
          if(data.length === 0){
            layer.msg('请至少选择一行');
          } else {
          	
        	  active.pushAndCancel(0,data);
          }
        break;
    };
  });
  
  
//监听行工具事件
  table.on('tool(dataTable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var rowData = obj.data //获得当前行数据
    ,layEvent = obj.event; //获得 lay-event 对应的值
    if(layEvent === 'detail'){
      layer.msg('查看操作');
    } else if(layEvent === 'del'){
    	active.deleteArticle(rowData.id);
    } 
  });
  
});


</script>



</body>
</html>